<template>
  <div>
    <el-table
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="100"
      />
      <el-table-column
        prop="taskCode"
        label="工单编号"
      />
      <el-table-column
        prop="innerCode"
        label="设备编号"
      />
      <el-table-column
        prop="taskType.typeName"
        label="工单类型"
      />
      <el-table-column
        prop="createType"
        label="工单方式"
      >
        <template #default="scope">
          {{ hireMap[+scope.row.createType] || '未知' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="taskStatusTypeEntity.statusName"
        label="工单状态"
      />
      <el-table-column
        prop="userName"
        label="运营人员"
      />
      <el-table-column
        prop="updateTime"
        label="创建日期"
      />
      <el-table-column
        prop="zip"
        label="操作"
      >
        <template #default="scope">
          <el-button type="text" size="small" @click="dialogFn(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomBox">
      <span v-if="formList.totalCount>10">共{{ formList.totalCount }}条记录  第 {{ formList.pageIndex }}/{{ formList.totalPage }}页</span>
      <el-pagination
        background
        :page-size="formList.pageSize"
        hide-on-single-page
        prev-text="上一页"
        next-text="下一页"
        align="right"
        layout="prev, next"
        :total="formList.totalCount"
        :page-count="tableData.totalPage"
        :current-page="formList.pageIndex"
        @current-change="currentChange"
      />
    </div>
    <WordInfo :row-list="rowList" :is-show="isShow" @closeDialogFn="closeDialog" @createdFn="createdWordFn" @fetchListFn="fetchList" />
    <AddWord :dialog-visible="addWordIsShow" :row-scend-list="rowList" @fetchListFn="fetchListTwo" @closeInsideWord="closeInsideWord" />
  </div>
</template>

<script>
import AddWord from './AddWord'
import WordInfo from './WordInfo'
import { searchOrderApi } from '@/api'
import TimeStyle from '@/utils/TimeStyle'
export default {
  components: {
    AddWord,
    WordInfo
  },
  props: {
    formInline: {
      type: Object,
      default: () => {}
    },
    isFromDate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      addWordIsShow: false,
      rowList: {
        taskStatusTypeEntity: {
          statusName: ''
        }
      },
      tableData: [],
      formList: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        isRepair: true
      },
      hireMap: {
        0: '自动',
        1: '手动'
      },
      isShow: false
    }
  },
  watch: {
    isFromDate() {
      this.formList = {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        isRepair: false
      }
      this.formList = { ...this.formList, ...this.formInline }
      if (this.isFromDate) {
        this.fetchList()
      }
      this.$emit('nopeSubmit')
    }
  },
  statusList: {},
  created() {
    this.fetchList()
  },
  methods: {
    // 获取渲染页面的数据
    async fetchList() {
      this.loading = true
      const res = await searchOrderApi(this.formList)
      // console.log(res)
      this.tableData = this.ListDate(res.currentPageRecords)
      TimeStyle(this.tableData)
      // console.log(this.tableData)
      // console.log(this.tableData)
      // this.formList = res
      // console.log(this.formList)
      // console.log(res)
      this.formListFn(res)
      this.loading = false
    },
    // 订单详情弹窗
    dialogFn(row) {
      this.isShow = true
      this.rowList = row
      // console.log(this.rowList, '444444444444444444')
    },
    // 订单详情的回调
    closeDialog() {
      this.isShow = false
    },
    // 对获取的数据进行类型转换处理
    formListFn(val) {
      this.formList.totalPage = Number(val.totalPage)
      this.formList.totalCount = Number(val.totalCount)
      this.formList.pageSize = Number(val.pageSize)
      this.formList.pageIndex = Number(val.pageIndex)
    },
    // 分页渲染当前页面数据
    currentChange(val) {
      this.formList.pageIndex = val
      this.fetchList()
    },

    createdWordFn() {
      this.addWordIsShow = true
    },
    // 关闭弹窗的回调
    closeInsideWord() {
      this.addWordIsShow = false
      this.isShow = false
    },
    ListDate(arr) {
      const resArr = []
      arr.map(item => {
        if (!item.taskType) {
          item.taskType = {}
          item.taskType.typeName = '补货工单'
        }
        resArr.push(item)
      })
      return resArr
    },
    fetchListTwo() {
      this.formList = {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        isRepair: false
      }
      this.fetchList()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-pagination{
  margin-top: 30px;
}
::v-deep .el-pagination button{
width: 70px;
}
.bottomBox span{
position:absolute;
font-size: 21px;
color: #dbdfe5;
}
::v-deep .el-table th, .el-table tr{
  background: #f3f6fb;
}
*{
  font-size: 18px;
}
</style>
